<template>
    <div class="moment-page">
        <!--        面包屑导航-->
        <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>全国</el-breadcrumb-item>
                <el-breadcrumb-item v-for="(a,index) in moment.addr" :key="index">{{a.name}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-row :gutter="20">
            <el-col :span="16">
                <!--                文章所有信息-->
                <div class="moment-all-info">
                    <!--                    标题-->
                    <h2 class="moment-title">
                        {{moment.title}}
                    </h2>

                    <!--                    文章基本信息-->
                    <div class="moment-info-box">
                        <el-avatar @click.native="$router.push(`/diner/${moment.account}`)" style="cursor: pointer"
                                   size="medium"
                                   :src="moment.avatar"></el-avatar>
                        <span @click="$router.push(`/diner/${moment.account}`)"
                              class="username">{{moment.username}}</span>
                        <span class="time">发布于 {{moment.createTime | format('YYYY-MM-DD')}}</span>
                        <span class="view-num">
                            {{moment.viewNum}} <font-awesome-icon style="margin-left: 2px" :icon="['fas', 'eye']"/>
                        </span>

                        <el-tooltip class="item" effect="dark" content="点击Mark，方便查找文章" placement="top">
                            <span class="mark-num" @click="dialogVisible = true">
                                {{moment.markNum}}
                                <font-awesome-icon v-if="form.markId" style="margin-left: 2px;color: #F56C6C"
                                                   :icon="['fas', 'bookmark']"/>
                                <font-awesome-icon v-else style="margin-left: 2px" :icon="['fas', 'bookmark']"/>
                            </span>
                        </el-tooltip>

                        <el-tooltip class="item" effect="dark" content="用户文章违规，点击举报" placement="top">
                            <span class="report">
                                <font-awesome-icon style="margin-left: 2px" :icon="['fas', 'exclamation-triangle']"/>
                            </span>
                        </el-tooltip>
                    </div>

                    <!--                    标签列表-->
                    <div class="tags-list">
                        <el-tag size="mini" class="tag" effect="dark" v-for="(tag,index) in moment.tags" :key="index">
                            {{tag.name}}
                        </el-tag>
                    </div>

                    <!--                    内容-->
                    <div class="moment-content typo" v-html="moment.content">
                    </div>

                    <!--                    图片列表-->

                </div>
                <!--                    评论列表-->

                <Comment :account="moment.account" :type="1" :momentId="parseInt($route.params.id)"/>

            </el-col>
            <el-col :span="8">
                2
            </el-col>
        </el-row>


        <!--        mark弹出框-->
        <el-dialog
                top="8vh"
                title="Mark"
                :visible.sync="dialogVisible"
                width="40%"
                :close-on-press-escape="false"
                :close-on-click-modal="false">
            <div>
                <el-form :rules="rules" size="small" ref="form" :model="form" label-width="80px">
                    <el-form-item label="卡片名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺地点" prop="addr">
                        <el-input v-model="form.addr"></el-input>
                    </el-form-item>
                    <el-form-item label="菜品名称" prop="foodName">
                        <el-input v-model="form.foodName"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 100%" label="备注">
                        <el-input type="textarea" v-model="form.remark"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="text-align: right">
                    <el-button size="small"
                               type="primary"
                               v-if="form.markId==undefined"
                               @click="submit">Mark</el-button>
                 <el-button size="small"
                            type="danger"
                            v-else
                            @click="deleteMark">unmark</el-button>
                 </span>
        </el-dialog>

    </div>
</template>

<script>
    import Comment from "@/components/Comment"

    import {getMomentDetailInfo} from "@/api/common/common"
    import {getMarkByAccount, createMark, deleteMark} from "@/api/business/mark"

    export default {
        name: 'Moment',
        data() {
            return {
                dialogVisible: false,
                momentId: -1,
                moment: {},

                form: {
                    markId: null
                },
                rules: {
                    name: [
                        {required: true, message: '请设置卡片名称', trigger: 'blur'},
                    ],
                    addr: [
                        {required: true, message: '请设置店铺名字', trigger: 'blur'},
                    ],
                    foodName: [
                        {required: true, message: '请设置菜品名称', trigger: 'blur'},
                    ]
                }
            };
        },
        methods: {
            /**
             * 删除makr
             */
            deleteMark() {
                if (this.momentId != -1) {
                    deleteMark(this.momentId).then(res => {
                        this.dialogVisible = false
                        this.form = {}
                        this.msgSuccess("删除成功")
                    })
                }
            },
            /**
             * TODO 获取mark，需要判断用户是否登录
             */
            getMarkByAccount() {
                if (this.isLogin() && this.momentId != -1) {
                    getMarkByAccount(this.momentId).then(res => {
                        let data = res.data
                        if (data) {
                            this.form.markId = data.markId
                            this.form.name = data.name
                            this.form.addr = data.addr
                            this.form.foodName = data.foodName
                            this.form.remark = data.remark
                        }
                    })
                }
            },
            /**
             * 创建mark
             */
            submit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        let url = window.location.href
                        let params = {
                            momentId: this.momentId,
                            name: this.form.name.trim(),
                            addr: this.form.addr.trim(),
                            foodName: this.form.foodName.trim(),
                            remark: this.form.remark,
                            url: url
                        }
                        createMark(params).then(res => {
                            this.msgSuccess("创建成功")
                            this.dialogVisible = false
                            this.getMarkByAccount()
                        })
                    } else {
                        this.msgWarn("请填写基本信息")
                        return false;
                    }
                });

            },
            /**
             * 获取moment详细信息
             */
            getMomentDetailInfo() {
                if (this.momentId != -1) {
                    getMomentDetailInfo(this.momentId).then(res => {
                        this.moment = res.data
                        if (this.moment) {
                            document.title = this.moment.title + " - " + this.moment.username
                        }
                    })
                }
            }
        },
        mounted() {
            this.momentId = this.$route.params.id
            this.getMomentDetailInfo()
            this.getMarkByAccount()
        },
        components: {
            Comment
        }
    }
</script>

<style scoped lang='less'>
    .moment-page {
        .breadcrumb {
            margin: 20px 0;
        }


        .moment-all-info {
            padding: 20px;
            background-color: white;
            margin-bottom: 20px;

            .moment-content {
                border-bottom: 1px solid #EBEEF5;
                padding-bottom: 10px;
                margin-bottom: 20px;
            }

            .tags-list {
                margin: 10px 0 20px 0;
                background-color: #F2F6FC;
                padding: 15px;

                > .tag {
                    margin-right: 20px;
                    margin-bottom: 10px;
                    cursor: pointer;
                }
            }

            .moment-title {
                font-size: 22px;
                margin-bottom: 10px;
            }

            .moment-info-box {
                height: 50px;
                display: flex;
                align-items: center;

                > .username {
                    font-weight: 700;
                    color: #67C23A;
                    cursor: pointer;
                    margin: 0 15px 0 5px !important;
                }

                .view-num {
                    font-size: 14px;
                    margin: 0 10px;
                    color: #909399;
                }

                .mark-num:hover {
                    color: #E6A23C;
                }

                .report {
                    font-size: 14px;
                    margin: 0 10px;
                    cursor: pointer;
                    color: #F56C6C;
                }


                .mark-num {
                    font-size: 14px;
                    margin: 0 10px;
                    cursor: pointer;
                    color: #909399;
                }


                .time {
                    font-size: 14px;
                    margin: 0 10px;
                    color: #909399;
                }

            }
        }
    }
</style>